Breadcrumbs

Breadcrumbs

Use breadcrumbs to note the path of a record and help the user to navigate back to the parent.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<nav role="navigation" aria-label="Breadcrumbs">
  <ol class="slds-breadcrumb slds-list_horizontal slds-wrap">
    <li class="slds-breadcrumb__item slds-text-title_caps">
      <a href="javascript:void(0);">Parent Entity</a>
    </li>
    <li class="slds-breadcrumb__item slds-text-title_caps">
      <a href="javascript:void(0);">Parent Record Name</a>
    </li>
  </ol>
</nav>

About Breadcrumbs

Breadcrumbs are typically constructed with an ol because their order matters. You mark up breadcrumbs with classes from the horizontal list utility. When you add the .slds-breadcrumb class, the separators are automatically generated.

Accessibility

Place the breadcrumb in a nav element with role="navigation". The nav element is also marked-up with aria-label="Breadcrumbs" to describe the type of navigation.


Overview of CSS Classes

Selector.slds-breadcrumb
Summary

Create breadcrumbs component

Supportdev-ready
Restrictol
VariantTrue
Selector.slds-breadcrumb__item
Summary

Item of the breadcrumb list

Restrict.slds-breadcrumb li